<template>
  <div class="company-list-1">
    <div class="header">
      <img class="header-img" src="@/assets/line.svg" />
      <img class="header-img" src="@/assets/line.svg" />
      <img class="header-img" src="@/assets/line.svg" />
      <div class="header-title">养户生物资产总览</div>
    </div>
    <div class="content">
      <div class="card" v-for="(item, index) in info" :key="index">
        <el-tooltip :content="item?.farmerName" placement="top">
          <div class="card-name">{{ item?.farmerName }}</div>
        </el-tooltip>
        <div class="card-line1">
          <div class="card-line1-label">存栏</div>
          <div class="card-line1-value">{{ item?.stockNum }}</div>
        </div>
        <div class="card-line2">
          <div class="card-line2-left">
            <div class="icon"></div>
            <div class="date">&nbsp;&nbsp;{{ formatDate(item?.collarSeedlingDate) }}</div>
          </div>
          <div class="card-line2-right">
            <div class="label">
              {{ item?.type == 0 ? '上市' : item?.type == 1 ? '死淘' : '进苗' }}
            </div>
            <div :class="getValueClass(item)">
              {{
                item?.type == 0
                  ? (String(item?.salesNum).includes('-') ? '' : '+') + (item?.salesNum || 0)
                  : item?.type == 1
                    ? (String(item?.deadNum).includes('-') ? '' : '+') + (item?.deadNum || 0)
                    : (String(item?.collarSeedlingNum).includes('-') ? '' : '+') +
                      (item?.collarSeedlingNum || 0)
              }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'

const { info } = defineProps({
  info: {
    type: Object,
    default: () => {}
  }
})

const formatDate = (dateString) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  const month = date.getMonth() + 1
  const day = date.getDate()
  return `${month}/${day}`
}

// 获取数值显示的类名
const getValueClass = (item) => {
  let value = 0
  if (item?.type === 0) {
    value = item?.salesNum || 0
  } else if (item?.type === 1) {
    value = item?.deadNum || 0
  } else {
    value = item?.collarSeedlingNum || 0
  }
  
  return String(value).includes('-') ? 'red' : 'green'
}
</script>

<style scoped lang="scss">
.company-list-1 {
  font-size: 16px;
  border: #354e85 solid 1px;
  width: 100%;
  height: 360px;
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid #354e85;
  background-color: rgba($color: #fff, $alpha: 0.1);

  .header {
    background: url('@/assets/u25.svg') no-repeat;
    width: 700px;
    height: 50px;
    display: flex;
    align-items: center;
    padding-left: 20px;

    .header-img {
      height: 15px;
      width: 13px;
      margin-left: -4px;
    }

    .header-title {
      color: #51f4f3;
      padding-left: 10px;
    }
  }

  .content {
    height: 300px;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    align-content: flex-start;
    flex-wrap: wrap;

    .card {
      padding: 10px 5px;
      border: 1px solid rgba(35, 145, 255, 0.25);
      width: 180px;
      height: 126px;
      margin-right: 20px;
      margin-bottom: 15px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      &:nth-child(9n) {
        margin-right: 0;
      }

      &-name {
        font-size: 20px;
        display: -webkit-box;
        -webkit-line-clamp: 1; // 控制显示几行
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      &-line1 {
        display: flex;
        justify-content: space-between;
        align-items: center;

        &-value {
          font-size: 30px;
          font-weight: 500;
        }
      }

      &-line2 {
        display: flex;
        justify-content: space-between;
        align-items: center;

        &-left {
          display: flex;

          .icon {
            width: 16px;
            height: 19px;
            background: url('@/assets/hot.svg') no-repeat center center;
          }
        }

        &-right {
          display: flex;

          .green {
            color: greenyellow;
          }

          .red {
            color: red;
          }
        }
      }
    }
  }
}
</style>
